<template>
  <div class="article-card-wrapper" @click="gotoArticle">
    <img
      :src="config.baseURL + article.cover"
      alt="cover"
      class="cover"
      v-if="article.cover"
    />

    <div class="article-content">
      <div class="pub-info">
        <em class="pointableBlue" @click.stop="gotoAuthor">
          {{ article.authorName }}
        </em>
        <span style="color: var(--gray)">|</span>
        {{ formatDate }}
      </div>
      <h3 class="article-title">
        {{ article.title }}
      </h3>
      <h3 class="article-abstract">
        {{ article.digest }}
      </h3>
    </div>

    <button class="delete-draft-button" @click.stop="deleteDraft">删除</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { format } from '@/utils/time'
import { open } from '@/utils/link'
import { confirm } from '@/utils/popup'
import { post } from '@/utils/request'

import config from '@/config'

const props = defineProps<{
  article: App.Article
}>()

let datas = reactive([
  {
    iconClass: 'icon-eye',
    data: props.article.readTimes,
  },
  {
    iconClass: 'icon-like',
    data: props.article.likeTimes,
  },
  {
    iconClass: 'icon-comment',
    data: props.article.commentTimes,
  },
  {
    iconClass: 'icon-collect',
    data: props.article.collectTimes,
  },
])

let formatDate = computed(() => {
  return format(props.article.publishDate, 'yyyy-mm-dd')
})

function gotoArticle() {
  open(`/article/${props.article.id}`)
}

function gotoAuthor() {
  open(`/author/${props.article.authorId}/profile/article`)
}

function deleteDraft() {
  confirm('确定删除这个草稿吗?').then((flag) => {
    if (flag) {
      post('article/content/draft/delete', {
        draftId: props.article.id,
      })
    }
  })
}
</script>

<style scoped lang="scss">
@import 'style/shortcut';
$w: $articleCardWidth;
$h: $articleCardHeight;

.article-card-wrapper {
  position: relative;
  box-sizing: border-box;
  width: $w;
  height: $h;
  height: $h;
  padding: calc($h * 0.1) calc($w * 0.04);
  text-align: left;

  &:hover {
    background-color: rgb(249, 249, 249);
    cursor: pointer;
  }

  .article-content {
    float: left;
    width: calc($w * 0.65);
  }

  .pub-info {
    font-size: calc($h * 0.06);
    line-height: 2;
  }

  .article-title {
    font-size: calc($h * 0.14);
    font-weight: bold;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: calc($h * 0.05);
    pointer-events: none;
  }

  .article-abstract {
    font-size: calc($h * 0.09);
    color: var(--darkGray);
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events: none;
  }

  .datas {
    margin-top: calc($h * 0.04);

    display: flex;
    justify-content: left;
    align-items: center;

    li {
      i,
      span {
        font-size: calc($h * 0.02);
      }

      span {
        margin-left: calc($h * 0.04);
      }

      &:not(:first-child) {
        margin-left: calc($w * 0.05);
      }
    }
  }

  .cover {
    float: left;
    height: calc($h * 0.8);
    width: calc($w * 0.22);
    margin-right: calc($w * 0.03);
    opacity: 0.8;
  }

  .delete-draft-button {
    position: absolute;
    top: 8%;
    right: 3%;
    font-size: 14px;
    padding: 5px 8px;
    transition: 0.3s;
    border: 1px solid var(--gray);
    border-radius: 3px;

    &:hover {
      border-color: var(--lightBlue);
      color: var(--darkBlue);
    }
  }
}
</style>
